<!--  -->
<script setup>
const props = defineProps({
  mode: {
    default: 'default',
    validator(value) {
      return ['default', 'car', 'custom'].includes(value)
    },
  },
  extraKey: {
    type: [String, Array],
    default: null,
  },
})

const value = defineModel({
  type: String,
  default: '',
})
const show = ref(false)
</script>

<template>
  <div>
    <div @click="show = true">
      <wd-input v-model="value" type="text" v-bind="$attrs" readonly />
    </div>
    <wd-keyboard v-model="value" v-model:visible="show" :mode="props.mode" :extra-key="props.extraKey" close-text="完成">
      <template #title>
        <text>
          {{ value }}
        </text>
      </template>
    </wd-keyboard>
  </div>
</template>

<style scoped lang='scss'>

</style>
